<template>
	<view class="content">
		<view class="nav">
			<view class="nav-boxs" :class="[choice == 1 ? '  nav-boxs-active' : '']" @tap="choiceGo(1)">全部<view v-if="choice == 1"></view>
			</view>
			<view class="nav-boxs" :class="[choice == 2 ? '  nav-boxs-active' : '']" @tap="choiceGo(2)">已付款<view v-if="choice == 2"></view>
			</view>
			<view class="nav-boxs" :class="[choice == 3 ? '  nav-boxs-active' : '']" @tap="choiceGo(3)">已自提<view v-if="choice == 3"></view>
			</view>
			
		</view>

		
        <mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">
             	<view></view>
			<view class="list" v-if="choice == 1">
             	<view class="list-items" v-for='(item,index) in dataList' :key="index">
             		<view class="list-items-tittle">
             			<image src="../../../static/images/dianpu@2x.png" class="icon dianpu"></image><b>{{item.shop.name}}</b>
             			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
             			<view class="list-items-type " v-if="item.status==0">已付款</view>
						<view class="list-items-type " v-if="item.status==1">已自提</view>
             		</view>
             		<view class="list-items-area" @tap="goDetail(item.id)">
             			<view class="list-items-goods">
             				<image :src="item.goods.logo.thumb_url"></image>
             				<view class="list-items-goods-infos">
             					<view class="list-goods-tittle">{{item.goods.name}}</view>
             				</view>
             				<view class="list-goods-num">
             					<view class="list-goods-price">￥{{item.order.amount}}.00</view>
             					<view class="">x{{item.order.quantity}}</view>
             				</view>
             			</view>
             			
             			<view class="list-goods-heji">
             				<view class="count">合计</view>
             				<view class="price">￥{{item.order.total_amount}}.00</view>
             			</view>
             		</view>
             		<view class="list-btns">
             			<!-- <view class="list-btns-btn">去自提</view> -->
						<view class="list-btns-btn finish" v-if="item.status==1">订单完成</view>
						<view class="list-btns-btn finish" v-if="item.status==0">订单进行中</view>
             		</view>
             	</view>
				
			</view>
			
			<!-- 订单进行中 -->
			<view class="list" v-if="choice == 2">
			 	<view class="list-items" v-for='(item,index) in dataList' :key="index">
			 		<view class="list-items-tittle">
			 			<image src="../../../static/images/dianpu@2x.png" class="icon dianpu"></image><b>{{item.shop.name}}</b>
			 			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png" class="icon dianpu"></image>
			 			<view class="list-items-type ">已付款</view>
			 		</view>
			 		<view class="list-items-area"  @tap="goDetail(item.id)">
			 			<view class="list-items-goods">
			 				<image  :src="item.goods.logo.thumb_url"></image>
			 				<view class="list-items-goods-infos">
			 					<view class="list-goods-tittle">{{item.goods.name}}</view>
			 				</view>
			 				<view class="list-goods-num">
			 					<view class="list-goods-price">￥{{item.order.amount}}.00</view>
			 					<view class="">x{{item.order.quantity}}</view>
			 				</view>
			 			</view>
			 			
			 			<view class="list-goods-heji">
			 				<view class="count">合计</view>
			 				<view class="price">￥{{item.order.total_amount}}.00</view>
			 			</view>
			 		</view>
			 		<view class="list-btns">
			 			<view class="list-btns-btn">去自提</view>
			 		</view>
			 	</view>
				
			</view>
			
		<!-- 	订单完成 -->
			<view class="list" v-if="choice == 3">
				<view class="list-items" v-for='(item,index) in dataList' :key="index">
					<view class="list-items-tittle">
						<image src="../../../static/images/dianpu@2x.png" class="icon dianpu"></image><b>{{item.shop.name}}</b>
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png" class="icon dianpu"></image>
						<view class="list-items-type finish">已自提</view>
					</view>
					<view class="list-items-area"  @tap="goDetail(item.id)">
						<view class="list-items-goods">
							<image :src="item.goods.logo.thumb_url"></image>
							<view class="list-items-goods-infos">
								<view class="list-goods-tittle">{{item.goods.name}}</view>
							</view>
							<view class="list-goods-num">
								<view class="list-goods-price">￥{{item.order.amount}}.00</view>
								<view class="">x{{item.order.quantity}}</view>
							</view>
						</view>
						
						
						<view class="list-goods-heji">
							<view class="count">合计</view>
							<view class="price">¥ {{item.order.total_amount}}.00</view>
						</view>
					</view>
					<view class="list-btns">
						<!-- <view class="list-btns-btn">去自提</view> -->
						<view class="list-btns-btn finish">订单完成</view>
					</view>
				</view>
				
			</view>
        </mescroll-uni>  
			
		<text class='notice_nodata' v-if='noticeShow'>暂无数据</text>
	</view>
</template>

<script>
	import md5 from '../../../common/md5.js'
	import http from '../../../common/http.js'
	import common from '../../../common/common.js'
	import config from '../../../common/config.js'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
	export default {
		components: {
			uniSwiperDot,
			MescrollUni
		},
		data() {
			return {
				choice: 1,
				refuse: true,
				assembleType:1,//1:拼团购物；2:拼团返利
				assembleStatus:"",//0:进行中；1:已完成
				page:1,
				pageSize:20,
				// 下拉刷新的常用配置
					downOption: { 
						use: true, // 是否启用下拉刷新; 默认true
						auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					},
					// 上拉加载的常用配置
					upOption: {
						use: true, // 是否启用上拉加载; 默认true
						auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
						page: {
							num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
							size: 10 // 每页数据的数量,默认10
						},
						noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
						empty: {
							tip: '暂无相关数据'
						}
					},
					// 列表数据
					dataList: [],
					curPageLength:0,
					noticeShow:false,
				
			}
		},
		onLoad() {
             //this.getOrderLists();
		},
		onShow() {
		     this.assembleStatus ="";
		     this.dataList = [];
			 this.downCallback();
		},
		methods: {
			choiceGo(index) {
				this.choice = index;
				if(index==0){
					this.assembleStatus ="";
					this.dataList = [];
					this.downCallback();
				}else if(index==1){
					this.assembleStatus =0;
					this.dataList = [];
					this.downCallback();
				}else{
					this.assembleStatus =1;
					this.dataList = [];
					this.downCallback();
				}
				
			},
			goDetail(e) {
				uni.navigateTo({
					url:'../assembleDetails/assembleDetails?assembleId='+e+''
					/* url: '../goods-order-detail/goods-order-detail?index='+index */
				})
			},
			getOrderLists(){//获取订单列表数据
				var that =this;
				let params = {
						appid:common.appid,
						api_version:common.apiversion,
						timestamp:common.timesTamp,
						token:uni.getStorageSync("userToken"),
						type:this.assembleType,
						status:this.assembleStatus,
						page:this.page,
						page_size:this.pageSize
						
					};
				   let signStr = common.sign(params);
				   params.sign = signStr;
					 uni.request({
						 url:config.assembleUrl+'group/invite/list', 
						 method:"POST",
						 header:{
							 'content-type':'application/x-www-form-urlencoded',
							  },
						data: params,
						 success: function (res) {
						 }
					 });
			},
			//上拉加载更多 下拉刷新
			/*下拉刷新的回调 */
				downCallback(mescroll) {
					//联网加载数据
					this.getListDataFromNet(0, 1, (data) => {
						//联网成功的回调,隐藏下拉刷新的状态
						mescroll.endSuccess();
						//设置列表数据
						this.dataList.unshift(data[0]);
					}, () => {
						//联网失败的回调,隐藏下拉刷新的状态
						//mescroll.endErr();
					})
				},
				/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
				upCallback(mescroll) {
					//联网加载数据
					this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
									mescroll.endSuccess(curPageData.length);
						//设置列表数据
						this.dataList=this.dataList.concat(curPageData);
					}, () => {
						//联网失败的回调,隐藏下拉刷新的状态
						mescroll.endErr();
					})
				},
				async getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
					var that =this;
					 try {
						if (pageNum == 0) {
							//此处模拟下拉刷新返回的数据
							let params = {
									appid:common.appid,
									api_version:common.apiversion,
									timestamp:common.timesTamp,
									token:uni.getStorageSync("userToken"),
									type:this.assembleType,
									status:this.assembleStatus,
									page:1,
									page_size:this.pageSize
									
								};
							   let signStr = common.sign(params);
							   params.sign = signStr;
							   await uni.request({
									 url: 'https://sq-api.ujquan.com/group/invite/list', 
									 method:"POST",
									 header:{
										 'content-type':'application/x-www-form-urlencoded',
										  },
									data: params,
									 success: function (res) {
										 console.log(res);
										 var lists =res.data.data.list;
										 if((lists=="")||(lists==undefined)||(lists==[])){
											  that.noticeShow = true;
										  }else{
											  that.noticeShow = false; 
										  }
										 if(pageNum == 1)
										 that.dataList = []; //如果是第一页需手动置空列表
										 //console.log(lists);
										 that.dataList = that.dataList.concat(lists);
									 }
								 });
							
						
						} else {
							//此处模拟上拉加载返回的数据
							
							let params = {
									appid:common.appid,
									api_version:common.apiversion,
									timestamp:common.timesTamp,
									token:uni.getStorageSync("userToken"),
									type:this.assembleType,
									status:this.assembleStatus,
									page:this.page,
									page_size:this.pageSize
								};
							   let signStr = common.sign(params);
							   params.sign = signStr;
							   await uni.request({
									 url: 'https://sq-api.ujquan.com/group/invite/list', 
									 method:"POST",
									 header:{
										 'content-type':'application/x-www-form-urlencoded',
										  },
									data: params,
									 success: function (res) {
										 var lists =res.data.data.list;
										 if(pageNum == 1)
										 that.dataList = []; //如果是第一页需手动置空列表
										 //console.log(lists);
										 that.dataList = that.dataList.concat(lists);
									 }
								 });
						}
							//联网成功的回调
							successCallback && successCallback(that.dataList);
						} catch (e) {
							//联网失败的回调
							errorCallback && errorCallback();
						}
									
				}
			
			
			
			
		}
	}
</script>

<style>
	/* uni-image{
		width:15px;
		height:15px;
	} */
	page {
		background: rgba(245, 245, 245, 1);
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.nav {
		width: 100%;
		height: 50px;
		display: flex;
		flex-wrap: wrap;
		background: rgba(255, 255, 255, 1);
		border-bottom: 1px solid #EEEEEE;
		display: flex;
	}

	.nav-boxs {
		width: 20%;
		height: 43.5px;
		line-height: 43.5px;
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 45px;
		position: relative;
		flex: 1;
	}

	.nav-boxs-active {
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
		font-size: 16px;
	}

	.nav-boxs view {
		position: absolute;
		left: 10px;
		right: 10px;
		height: 2px;
		background: rgba(254, 67, 56, 1);
		bottom: 0;
	}

	.list {
		height: 100%;
		padding: 10px;
	}

	.list-items {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 12.5px 0px rgba(153, 153, 153, 0.1);
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.list-items-tittle {
		padding: 10px;
		height: 22px;
		display: flex;
		font-size:1em;
		line-height: 22px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}
	.list-items-tittle b{
		height: 22px;
		font-size:1em;
		line-height: 22px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	
	.list-items-tittle image {
		width:15px;
		height: 15px;
		margin: 5px 10px 2px 10px;
	}
	

	.list-items-type {
		position: absolute;
		right: 10px;
		font-size:0.9em;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
	}

	.list-items-area {
		width: 100%;
		height: 100%;
		border-bottom: rgba(238, 238, 238, 1) 1px solid;
	}

	.list-items-goods {
		height: 77px;
		padding: 0 10px 10px 10px;
		margin-right: 10px;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		display: flex;
	}

	.list-items-goods image {
		width: 77px;
		height: 77px;
		flex: 1;
	}

	.list-items-goods-infos {
		padding-left: 6px;
		flex: 2;
	}

	.list-goods-tittle {
		font-size:1em;
		line-height: 30px;
		height: 30px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 16.5px;
		line-height: 25px;
		flex: 3;
	}

	.list-goods-style {
		height: 15px;
		line-height: 15px;
		padding-top: 2px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.list-toods-price {
		height: 18px;
		line-height: 18px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding-top: 10px;
	}

	.list-goods-num {
		font-size: 17px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 18px;
		line-height: 18px;
		flex: 1;
		text-align: right;
	}

	.list-goods-tuikuan {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		position: absolute;
		right: 0;
	}

	.list-goods-heji {
		height: 25px;
		font-size:1em;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 15px;
		text-align: right;
		padding-right: 10px;
		display: flex;
	}
	.list-goods-heji .count{
		flex: 3;
		text-align: center;
		font-size: 1.1em;
		color: #999999;
	}
	.list-goods-heji .price{
		flex: 1;
		font-size: 1.1em;
		font-weight: 600;
	}

	.list-btns {
		height: 26px;
		padding: 11px;
		display: flex;
		justify-content: flex-end;
	}

	.list-btns-btn{
		font-size:0.9em;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: #666666;
		line-height: 30px;
		border-radius: 17px;
		border: 1px solid #CCCCCC;
		height: 30px;
		width: 75px;
		text-align: center;
		margin-left: 10px;
	}
	.finish{
		color:#666;
	}
	.list-btns-btn-gray {
		border: 1px solid rgba(153, 153, 153, 1);
		color: rgba(102, 102, 102, 1);
	}

	.list-btns-resttime {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 18px;
		line-height: 24px;
	}
	
	.list-btns-resttime a {
		color: #FF3B30;
	}
	.nav-boxs uni-view{
		width: 25px;
		margin: 0 auto;
	}
	.list-items-tittle uni-image.dianpu{
		width: 10px;
		height: 10px;
	}
	.list-goods-price{
		font-size: 0.9em;
	}
	.list-btns-btn_finish{
		color: #999999;
	}
	.notice_nodata{
		width:100%;
		color:#979797;
		position: absolute;
		top:200px;
		font-size:1.1em;
		text-align: center;
	}
</style>
